<template>
<el-row :gutter="5">
  <el-col :span="8"><div class="grid-content ep-bg-purple" /> <router-link to="/tuijie"><el-link type="tuijie">推荐</el-link></router-link></el-col>
  <el-col :span="8"><div class="grid-content ep-bg-purple" /> <router-link to="/guanzhu"><el-link type="guanzhu"style="font-size: 25px; color:gold;">关注</el-link></router-link></el-col>
  <el-col :span="8"><div class="grid-content ep-bg-purple" /> <router-link to="/changsha"><el-link type="changsha">长沙</el-link></router-link></el-col>
  </el-row>
  <hr>

  <div class="demo-type">
    <div>
      <el-avatar  src="/images/zyb2.jpg"/>
    </div>
    <div>
      <el-avatar
        src="/images/qian.jpg"
      />
    </div>
    <div>
      <el-avatar src="/images/zyb.jpg"> </el-avatar>
    </div>
  </div>
<!--  -->
  <div class="avatar-container">
 <img class="imgs" src="/public/images/zyb.jpg" alt="">
<p class="wen">dhfjkashfks</p>
<span>4小时前&nbsp;&nbsp;发布于长沙</span>
<p class="zi">上新了3件宝贝</p>
<div>
  <img class="imgss" src="/public/images/zyb1.jpg" alt="">
  
</div>
<div>
   <img class="imgsss" src="/public/images/ye.jpg" alt="">
</div>
<div>
<img class="img2" src="/public/images/che.jpg" alt="">
</div>
  </div>

  <div class="avatar-container">
 <img class="imgs" src="/public/images/qian.jpg" alt="">
<p class="wen">sdkfhsjkdhfs</p>
<span>4小时前&nbsp;&nbsp;发布于岳阳</span>
<p class="zi">上新了3件宝贝</p>
<div>
  <img class="imgss" src="/public/images/zyb4.jpg" alt="">
  
</div>
<div>
   <img class="imgsss" src="/public/images/ju3.jpg" alt="">
</div>
<div>
<img class="img2" src="/public/images/zyb5.jpg" alt="">
</div>
  </div>

  <div class="avatar-container">
 <img class="imgs" src="/public/images/zyb2.jpg" alt="">
<p class="wen">sdlkgfopse</p>
<span>4小时前&nbsp;&nbsp;发布于郴州</span>
<p class="zi">上新了3件宝贝</p>
<div>
  <img class="imgss" src="/public/images/ju1.jpg" alt="">
  
</div>
<div>
   <img class="imgsss" src="/public/images/ju2.jpg" alt="">
</div>
<div>
<img class="img2" src="/public/images/zyb6.jpg" alt="">
</div>
  </div>
</template>
<script setup>

</script>
<style scoped>
.el-carousel__item h3 {
  /* opacity: 0.75; */
  line-height: 20px;
  /* margin-bottom: 0; */
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  margin-top: 10px;

}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 50px;
}

.grid-content {
  border-radius: 10px;
}
.el-link{
  font-size: 20px;
  text-align: center;
}
.kuang{
background-color: rgb(0, 0, 0);
height: 60px;
}

.el-input{
  border:1px solid #c0bdb7 ;
  width: 450px;
  text-align: center;
  top: 25%;
  left:60px ;
}


/*  */
.demo-type {
  display: flex;
  margin-top: 5px;
}
.demo-type > div {
  flex: 1;
  text-align: center;
  margin-top: 5px;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.avatar-container {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 1000px; /* 设置容器宽度 */
  height: 400px; /* 设置容器高度 */
  display: flex;
  /* justify-content: center; */
  /* align-items: center;  */
  margin-top: 30px;
  margin-left: 150px;
}

.imgs {
  width: 60px; /* 设置头像宽度 */
  height: 60px; /* 设置头像高度 */
  margin-left: 60px;
  margin-top: 40px;
}
.imgss{
  width: 200px; /* 设置头像宽度 */
  height: 200px; /* 设置头像高度 */
  margin-left: -150px;
  margin-top: 125px;
}
.imgsss{
  width: 200px; /* 设置头像宽度 */
  height: 200px; /* 设置头像高度 */
  margin-left:60px;
  margin-top: 125px;
}
.img2{
  width: 200px; /* 设置头像宽度 */
  height: 200px; /* 设置头像高度 */
 margin-left:60px;
  margin-top: 125px;
}
.wen{
  margin-left: 10px;
  margin-top: 40px;
}
.zi{
  margin-left: -95px;
  margin-top: 90px;
}
.avatar-container span{
  margin-left: -85px;
  margin-top: 65px;
  font-size: 10px;
  color: darkgrey;
}
</style>